<!-- 获取短信验证码 -->
<template>
    <el-button :class="time<60?'default-class':'primary-class'" size="small" class="get-message-code">{{text}}</el-button>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    @Component({

    })
    export default class MessageCode extends Vue {
        @Prop() phoneNumber: string;
        time: number = 60;
        text: string = '获取验证码';
        timeId = null;
        res: any = '';
        // 获取验证码
        start () {
            if (this.time < 60) {

            }else {
                if (this.timeId) {
                    return;
                }
                this.getMessageCode().then(data => {
                    // console.log(data)
                    // console.log(JSON.parse(JSON.stringify(data)))

                    this.timeId = setInterval(_ => {
                        this.time -= 1
                        this.text = `${this.time}秒后再次发送`
                        if (this.time < 2) {
                            this.text = '重新获取验证码'
                            this.time = 60
                            clearInterval(this.timeId)
                            this.timeId = null
                        }
                    }, 1000)

                    // if (JSON.parse(JSON.stringify(data)).code == 200) {
                    //     this.timeId = setInterval(_ => {
                    //         this.time -= 1
                    //         this.text = `${this.time}秒后再次发送`
                    //         if (this.time < 2) {
                    //             this.text = '重新获取验证码'
                    //             this.time = 60
                    //             clearInterval(this.timeId)
                    //             this.timeId = null
                    //         }
                    //     }, 1000)
                    // }
                })
            }
        }
        async getMessageCode () {
            return this.$http.get(`customers/phoneVerify/${this.phoneNumber}`)
                .then((response) => {
                    this.res = response.data;
                    return this.res;
                })
        }
        mounted () {
            console.log()
        }
    }
</script>

<style lang="scss" scoped>
    .get-message-code {
        width: 100px;
        height: $height-int-register;
        background-color: $__color-bg-unimportance;
        color: $__color-primary;
        padding: 0;
        border: 1px solid $__color-primary;
        &:hover {
            color: $__color-primary;
        }
        &:active {
            color: $__color-primary;
        }
    }
    .default-class {
        background-color: $__color-border;
        color: #fff;
        border: 1px solid $__color-border;
    }
</style>